<script lang="ts" setup>
import {Delete, Edit, FolderAdd, Refresh, Search} from '@element-plus/icons-vue'
import {reactive, ref, watch} from "vue";
import {editComputer, getComputerList, getSearchComputer, deleteComputer, addComputer} from "@/api/computer.js";

const tableData = ref([])
const formInline = reactive({
  price: '',
  detail: '',
})
const onSubmit = async () => {
  console.log('submit!')
  console.log(formInline)
  console.log(formInline.valueOf())
  let result = await getSearchComputer(formInline)
  console.log(result)
  tableData.value = result.date
}
const ComputerList = async ()=> {
  let result = await getComputerList();
  tableData.value = result.date
  console.log(tableData.value)
}
ComputerList()
const refreshSearchInfo = ()=>{
  formInline.price = ''
  formInline.detail = ''
}
const isDisabled = ref(true)
//编辑电脑信息
const currentComputerData = ref({
  id:'',
  price:null,
  detail:''
})
const editComputerInfo = async () => {
  dialogVisible.value = false;
  if (formLabelAlign.detail == '') {
    //如果formLabelAlign.detail为空，则说明管理员没有输入，则为原始值
    formLabelAlign.detail = currentComputerData.value.detail
  }
  if (formLabelAlign.price == '') {
    //如果formLabelAlign.price为空，则说明管理员没有输入，则为原始值
    formLabelAlign.price = currentComputerData.value.price
  }
  console.log("7777777777777777777777777777777")
  console.log(formLabelAlign)
  let result = await editComputer(formLabelAlign)
  if (result.code == 200) {
    // ElMessage.success(result.date?result.date:"修改成功！")
    ElNotification.success(result.date?result.date:"修改成功！")
    ComputerList()
  }else {
    // ElMessage.error(result.date ? result.date : "修改失败！")
    ElNotification.error(result.date ? result.date : "修改失败！")
  }
  //清空输入框的数据
  formLabelAlign.id = ''
  formLabelAlign.price = ''
  formLabelAlign.detail = ''
}
//删除信息之后，判断输入框是否还为空 为空则无法点击“确认”按钮
const isDisabledChange = ()=>{
  if (formLabelAlign.price == '' && formLabelAlign.detail == '') {
    isDisabled.value = true
  }
}
//清空输入框的数据
const cancelEditComputer = ()=>{
  dialogVisible.value = false;
  isDisabled.value = true
  formLabelAlign.id = ''
  formLabelAlign.price = ''
  formLabelAlign.detail = ''
  ElMessage.info("用户取消编辑")
}
//点击编辑按钮的函数 先显示修改信息框，currentComputerData获取当前行的电脑信息
const clickEditButton = (row)=> {
  dialogVisible.value = true
  currentComputerData.value.id = row.id
  currentComputerData.value.price = row.price
  currentComputerData.value.detail = row.detail
  formLabelAlign.id = row.id //输入框的formLabelAlign值只存储id，因为id不能修改
}

//对话框
import {ElMessage, ElMessageBox, ElNotification} from 'element-plus'

const dialogVisible = ref(false)
// 差(关)掉修改信息窗口的函数
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('您的修改还未提交，确认要关闭修改信息窗口吗?')
      .then(() => {
        done()
        ElMessage.info("用户关闭编辑窗口")
      })
      .catch(() => {
        // catch error

      })
}

//对话框中的信息修改
import type { FormProps } from 'element-plus'

const labelPosition = ref<FormProps['labelPosition']>('right')
const labelPosition1 = ref<FormProps['labelPosition1']>('right')

const formLabelAlign = reactive({
  id: '',
  detail: '',
  price: '',
})
const formAddComputer = reactive({
  id: '',
  detail: '',
  price: '',
})
watch(formLabelAlign,()=>{
  if (formLabelAlign.detail != '' || formLabelAlign.price != '') {
    isDisabled.value = false
  }
})
// 删除电脑
const deleteComputerInfo = (row)=>{
  console.log("555555555555555555555")
  console.log(row)
  currentComputerData.value.id = row.id
  currentComputerData.value.price = row.price
  currentComputerData.value.detail = row.detail
  ElMessageBox.confirm('确认要删除该电脑及其信息吗?')
      .then(async () => {
        let result = await deleteComputer(currentComputerData.value)
        console.log(result)
        if (result.code == 200) {
          // ElMessage.success('删除成功！')
          ComputerList()
          ElNotification.success("删除成功！")
        }else {
          // ElMessage.error('删除失败！')
          ElNotification.error("删除失败！")
        }
      })
      .catch(() => {
        // catch error
        ElMessage.info('用户取消删除')
      })

}


//抽屉部分的代码
import { ElButton, ElDrawer } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'

const visible = ref(false)
//添加电脑
const addComputerInfo = async () => {
  let result = await addComputer(formAddComputer)
  console.log("添加电脑结果：")
  console.log(result)
  if (result.code == 200) {
    visible.value = false
    ElNotification.success("添加电脑成功！")
  }else {
    visible.value = false
    ElNotification.error("添加电脑失败！")
  }
  formAddComputer.id = ''
  formAddComputer.detail = ''
  formAddComputer.price = ''
  ComputerList()
}
</script>

<template>
  <div>
    <!-- 搜索框 -->
    <div class="searchFormDiv">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="价格">
          <el-input v-model="formInline.price" placeholder="请输入电脑价格" @keyup="onSubmit"></el-input>
        </el-form-item>
        <el-form-item label="机型">
          <el-input v-model="formInline.detail" placeholder="请输入电脑类型" @keyup="onSubmit"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit"><el-icon><Search/></el-icon>搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="default" @click="ComputerList();refreshSearchInfo()"><el-icon><Refresh/></el-icon>重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="default" @click="visible = true"><el-icon><FolderAdd/></el-icon>添加电脑</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="tableData" height="250" style="width: 100%">
        <el-table-column prop="id" label="序号" width="180"/>
        <el-table-column prop="price" label="价格" width="180"/>
        <el-table-column prop="detail" label="机型"/>
        <el-table-column prop="" label="操作">
          <template #default="{ row }">
            <el-button type="primary" @click="/*dialogVisible = true;*/clickEditButton(row);/*editComputerInfo(row)*/">
              <el-icon><Edit/></el-icon>
              编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template #default="{ row }">
            <el-button type="danger" plain @click="deleteComputerInfo(row)"><el-icon><Delete/></el-icon>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!--    对话框-->
    <el-dialog
        v-model="dialogVisible"
        title="修改电脑信息"
        width="500"
        :before-close="handleClose"
    >
      <span>请输入信息修改该电脑信息</span>
      <div style="margin: 20px" />
      <el-form
          :label-position="labelPosition"
          label-width="auto"
          :model="formLabelAlign"
          style="max-width: 600px"
      >
        <el-form-item label="电脑类型">
          <el-input v-model="formLabelAlign.detail" :placeholder="currentComputerData.detail" @keyup="isDisabledChange"/>
        </el-form-item>
        <el-form-item label="电脑价格">
          <el-input v-model="formLabelAlign.price" :placeholder="currentComputerData.price" @keyup="isDisabledChange"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelEditComputer">取消</el-button>
          <el-button type="primary" @click="/*dialogVisible = false;*/editComputerInfo" :disabled=isDisabled>
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>

<!--    添加电脑的侧边抽屉栏-->
    <el-drawer v-model="visible" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <h4 :id="titleId" :class="titleClass">添加新电脑</h4>
        <el-button type="danger" @click="close">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          关闭
        </el-button>
      </template>
      选择你喜欢的ui类型
      <el-radio-group v-model="labelPosition1" aria-label="label position">
        <el-radio-button value="left">居左</el-radio-button>
        <el-radio-button value="right">居右</el-radio-button>
        <el-radio-button value="top">顶部</el-radio-button>
      </el-radio-group>
      <div style="margin: 20px" />
      <el-form
          :label-position="labelPosition1"
          label-width="auto"
          :model="formAddComputer"
          style="max-width: 600px"
      >
        <el-form-item label="电脑类型">
          <el-input v-model="formAddComputer.detail" />
        </el-form-item>
        <el-form-item label="电脑价格">
          <el-input v-model="formAddComputer.price" />
        </el-form-item>
      </el-form>
      <div class="drawerButton">
        <el-button type="primary" @click="addComputerInfo">确认</el-button>
      </div>

    </el-drawer>
  </div>
</template>

<style scoped>
.drawerButton {
  position: absolute;
  right: 20px;
}
</style>